<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">共识算法配置</div>
                <button id="switch" class="layui-btn layui-btn-radius" lay-submit lay-filter="switch" style="margin-left:20px;margin-top:5px">
                    切换
                </button>
                <button id="run_consensus" class="layui-btn layui-btn-radius" lay-submit lay-filter="run_consensus" style="margin-left:20px;margin-top:5px">
                    运行
                </button>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                    </div>
                    <table id="info_table" lay-filter="info_table">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="table_operate">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<!--审核通过弹框-->
<div class="site-text" style="margin: 5%; display: none" id="check_tg">
    <div class="layui-form" action="" lay-filter="check_tg_form">
        <form class="layui-form" action="" lay-filter="component-form-element">
            <div class="layui-row layui-col-space10 layui-form-item" hidden>
                <div class="layui-col-lg6">
                    <label class="layui-form-label">序号</label>
                    <div class="layui-input-block">
                        <input type="text" name="id" lay-verify="required" disabled th:value="${param.id}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">参数名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" disabled th:value="${param.name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">参数含义</label>
                    <div class="layui-input-block">
                        <input type="text" name="meaning" lay-verify="required" disabled th:value="${param.meaning}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">取值</label>
                    <div class="layui-input-block">
                        <input type="number" name="value" lay-verify="required" th:value="${param.value}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item" hidden>
                <div class="layui-col-lg6">
                    <label class="layui-form-label">算法类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="algorithm" lay-verify="required" disabled th:value="${param.algorithm}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" hidden>
                <div class="layui-input-block">
                    <button id="check_tg_submit" class="layui-btn" lay-submit lay-filter="check_tg_submit">
                        保存
                    </button>
                </div>
            </div>
        </form>

    </div>
</div>
<!--共识算法选择-->
<div class="site-text" style="margin: 5%; display: none" id="select_tg">
    <div class="layui-form" action="" lay-filter="select_tg_form">
        <form class="layui-form" action="" lay-filter="component-form-element-select">
            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label" style="width:100px">共识算法选择</label><br/>
                    <div class="layui-input-block" style="width:300px">
                        <select name="alg" style="width:300px">
                            <option th:value="0">DPOSPT共识算法</option>
                            <option th:value="1">基于信誉度的共识算法</option>
                            <option th:value="2">融合共识算法</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" hidden>
                <div class="layui-input-block">
                    <button id="select_tg_submit" class="layui-btn" lay-submit lay-filter="select_tg_submit">
                        确定
                    </button>
                </div>
            </div>
        </form>

    </div>
</div>
<!--进度条-->
<div class="site-text" style="margin: 5%; display: none" id="progressDiaglog">
    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="executeprogress">
        <div id="percentdiv" class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
    </div>
</div>



<script type="text/javascript" th:inline="javascript">

    layui.use(['table','element','form'],function () {
        var table = layui.table
            ,element = layui.element
            ,form = layui.form;
        table.render({
            elem: '#info_table'
            ,url: '/get_consensus_param'
            ,method : 'post'
            ,toolbar: true
            ,defaultToolbar: ['filter', 'print']
            ,cellMinWidth: 80
            ,page: true
            ,cols: [
                [
                    {field: 'id', title: '序号'},
                    {field: 'name', title: '参数名'},
                    {field: 'meaning', title: '参数含义'},
                    {field: 'value', title: '取值'},
                    {fixed: 'right', title:'操作', toolbar: '#table_operate', width:'25%'}
                ]
            ]
        });

        table.on('tool(info_table)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.open({
                    type: 1
                    ,skin: 'layui-layer-molv'
                    ,area: ['40%', '60%']
                    ,title: ['编辑','font-size:18px']
                    ,btn: ['保存', '取消']
                    ,shadeClose: true
                    ,shade: 0 //遮罩透明度
                    ,maxmin: true //允许全屏最小化
                    ,content:$("#check_tg")  //弹窗路径
                    ,success:function(layero,index){
                        $.ajax({
                            url:"/get_one_consensus_param",
                            async: false,
                            type:"GET",
                            data: { id: data.id },
                            success: function(res){
                                var param = res.param;
                                form.val('component-form-element',param) // 表单赋值
                                form.render(null, 'component-form-element'); // 表单更新
                            }
                        });

                    }
                    ,yes : function(index, layero) { // 确认按钮回调函数
                        form.on('submit(check_tg_submit)', function(data) {
                            if (parseFloat(data.field.value) == 0.0) {
                                alert("取值不能为0！");
                                return;
                            }

                            $.ajax({
                                url:"/update_consensus_param",
                                async: false,
                                type:"POST",
                                contentType: "application/json",
                                data: JSON.stringify(data.field),
                                success: function(data){
                                    if(data==="error"){
                                        layer.msg('修改失败！', {icon: 2});
                                        layer.close(index);
                                    }else if(data==="success"){
                                        layer.msg('修改成功！', {icon: 1});
                                        location.reload()

                                    }
                                }
                            });
                            return false;
                        });
                        $('#check_tg_submit').click();

                    }
                    ,btn2 : function(index, layero) { // 取消按钮回调函数
                        layer.close(index); // 关闭弹出层
                    }
                });
            }
        });

        //定义定时器
        var timer;
        //开始执行任务
        $('#run_consensus').click(function(){
            //进度条设置为百分之0
            element.progress('executeprogress', '0%');
            layer.open({
                type: 1
                ,skin: 'layui-layer-molv'
                ,title: ['运行进度','font-size:18px']
                , area: ['500px', '200px']
                ,btn: ['取消']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                ,maxmin: true //允许全屏最小化
                ,content:$("#progressDiaglog")  //弹窗路径
                ,success:function(layero,index){
                    for (let i = 1; i <=36; i++) {
                        element.progress('executeprogress', i+'%');
                    }
                    //请求后台
                    $.ajax({
                        type:"post",
                        url:"/update_block_info",
                        cache:false,
                        success:function () {
                            console.log('success')
                            element.progress('executeprogress', '100%');
                        }
                    });
                }
                ,btn2 : function(index, layero) { // 取消按钮回调函数
                    layer.close(index); // 关闭弹出层
                }
            });

        });
        //轮询请求进度数据
        function getProcessvalue(){
            //1秒请求一次进度条的数据
            timer = setInterval(function () {
                element.progress('executeprogress', [[${session.processvalue}]]+'%');
            }, 1000);
        };
        //切换
        $('#switch').click(function(){
            layer.open({
                type: 1
                ,skin: 'layui-layer-molv'
                ,area: ['40%', '60%']
                ,title: ['共识算法选择','font-size:18px']
                ,btn: ['确定', '取消']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                ,maxmin: true //允许全屏最小化
                ,content:$("#select_tg")  //弹窗路径
                ,success:function(layero,index){
                    var param = { alg: '0'}
                    form.val('component-form-element-select',param) // 表单赋值
                    form.render(null, 'component-form-element-select'); // 表单更新
                }
                ,yes : function(index, layero) { // 确认按钮回调函数
                    form.on('submit(select_tg_submit)', function(data) {
                        console.log('form', data.field)
                        console.log('session:', layui.sessionData('alg'))
                        $.ajax({
                            url:"/update_alg?alg="+data.field.alg,
                            async: false,
                            type:"POST",
                            contentType: "application/json",
                            success: function(data){
                                if(data==="error"){
                                    layer.msg('切换失败！', {icon: 2});
                                    layer.close(index);
                                }else if(data==="success"){
                                    layer.msg('切换成功！', {icon: 1});
                                    location.reload()

                                }
                            }
                        });
                    });
                    $('#select_tg_submit').click();

                }
                ,btn2 : function(index, layero) { // 取消按钮回调函数
                    layer.close(index); // 关闭弹出层
                }
            });
        })

    });
    function createTime(v){
        var date = new Date(v);
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = date.getDate();
        d = d<10?("0"+d):d;
        var h = date.getHours();
        h = h<10?("0"+h):h;
        var M = date.getMinutes();
        M = M<10?("0"+M):M;
        var str = y+"-"+m+"-"+d+" "+h+":"+M;
        return str;
    }
</script>

</body>
</html>
